<template>
  <div>
    <h1>父组件</h1>
    <son :info="info" :obj="obj" :msg="msg" @fun="fun" @foo="foo">
      <ul>
        <li>{{ info }}</li>
      </ul>
    </son>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, reactive, ref } from "vue";
import Son from "./components/Son.vue";
export default defineComponent({
  setup() {
    const info = ref("腿好麻呀！！");
    const obj = reactive({
      name: "tom",
      age: 18,
    });
    // 第一个参数key  第二个参数是传入的值，默认类型是unknown，
    provide("info", info);
    provide("num", ref(1));
    provide("obj", obj);
    function foo() {
      console.log(info);
      //setup当中的info 是个ref对象，而template当中的info是字符串，info.value
      console.log("emit 第二个事件");
    }
    const msg = ref("一个是ref对象，一个是proxy对象");
    function fun(value: string) {
      console.log("$emit自定义事件");
      console.log(info.value + value);
    }
    return {
      info,
      obj,
      foo,
      msg,
      fun,
    };
  },
  components: {
    Son,
  },
});
</script>

<style scoped>
</style>